<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@taglib prefix="mvc" uri="http://www.springframework.org/tags/form" %>
<%@taglib prefix="fmt" uri="http://www.springframework.org/tags" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>收支统计</title>
    <link rel="stylesheet" href="../../lib/layui/layui/css/layui.css">
    <script type="text/javascript" src="../../js/news/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="../../lib/layui/layui/lay/dest/layui.all.js"></script>
    <script src="../../js/base/base.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" src="/lib/highcharts.js"></script>
    <script src="../../lib/layui/layui/layui.js"></script>
    <style>
        * {font-family: "Microsoft Yahei" !important;}
        .layui-tab-title li{
            min-width: 0px;
        }
        nav button{
            margin-left: 5px;
            padding: .25rem .5rem;
            font-size: .875rem;
            border-radius: .2rem;
            margin-top: 10px;
        }
        nav div{
            float: left !important;
            margin: 15px;
        }
        nav{
            height: 50px;
            border-bottom: 1px solid #cfdbe2;
            background-color: #fafbfc;
            border-radius: 0;
        }
        .layui-tab{
             margin:0;
        }
        .content{
            /*height: 544px;*/
            overflow: auto;
            margin: 14px;
            padding: 14px;
            background: #fff;
        }
        body ::-webkit-scrollbar {
            display: none;
        }
        .layui-tab-content{
            background-color: #F5F7FA;
        }
        .search{
            display: inline;
            margin-bottom: 1px;
            width: 185px;
            border: 0;
            background: #fafbfc;
        }
        .allBtn{
            float: left !important;
            margin-top: 10px;
            width: 80px;
            margin-left: 27px;
            border: none;
            background: #fafbfc;
        }
        .screen{
            float: left !important;
            margin-top: 10px;
            width: 80px;
            margin-left: 27px;
            border-radius: 5px;
            color: black;
            border-color: #03a9f4;
            background: #fafbfc;
            border: none;
        }
        .one{
            border: 1px solid #03a9f4;
            border-radius: 5px;
            color: #03a9f4;
            border-color: #03a9f4;
            background: #fafbfc;
        }
        tr td{
            text-align: center;
        }
        .layui-table-body{overflow-x: hidden;}
    </style>
</head>
<body>
<form class="site-content" >
    <nav>
        <button type="button" class="layui-btn layui-btn-primary layui-btn-sm allBtn one classBtn" id="allBtn">按月度</button>
        <button type="button" class="layui-btn layui-btn-primary layui-btn-sm screen classBtn " id="screen">按季度</button>

        <button type="button" onclick="typeMap(3)" class="layui-btn layui-btn-normal layui-btn-sm" style="margin-right: 30px;margin-left:5px;float: right !important;">柱状图</button>
        <button type="button" onclick="typeMap(2)" class="layui-btn layui-btn-normal layui-btn-sm" style="float: right !important;margin-left: 5px;">曲线图</button>
        <button type="button" onclick="typeMap(1)" class="layui-btn layui-btn-normal layui-btn-sm" style="float: right !important;" id="biaoge">表格</button>

        <%--<button type="button" class="layui-btn layui-btn-primary layui-btn-sm" style="float: right !important;" id="derivation">导出</button>--%>
    </nav>
    <nav style="height: 40px">
        <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief" style="margin-left: 15px;" id="searchul1">
            <ul class="layui-tab-title" id="searchul" lay-filter="searchul">
                <li  value="2017">2017</li>
                <li value="2018">2018</li>
                <li value="2019">2019</li>
                <li class="layui-this" value="2020">2020</li>
            </ul>
        </div>
        <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief" style="margin-left: 15px;display: none" id="searchul2">
            <ul class="layui-tab-title" id="searchul2s" lay-filter="searchul2s">
                <li value="2017">2017</li>
                <li value="2018">2018</li>
                <li value="2019">2019</li>
                <li class="layui-this" value="2020">2020</li>
            </ul>
        </div>
    </nav>
    <nav style="height: 40px">
        <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief" style="margin-left: 15px;">
            <ul class="layui-tab-title" id="searchuls" lay-filter="searchuls">
                <li  class="layui-this" value="0">所有月份</li>
                <li  value="1">1</li>
                <li value="2">2</li>
                <li value="3">3</li>
                <li value="4">4</li>
                <li value="5">5</li>
                <li value="6">6</li>
                <li value="7">7</li>
                <li value="8">8</li>
                <li value="9">9</li>
                <li value="10">10</li>
                <li value="11">11</li>
                <li value="12">12</li>
            </ul>
        </div>
    </nav>
    <nav style="height: 40px" class="isearchs">
        <div style="display: inline-block;border-bottom: 1px solid #ccc;margin-left: 25px;" class="isearch">
        <input type="text" class="search" placeholder="点击搜索计划" style="cursor: pointer;" readonly id="isearch"/>
        <span style="padding: 5px;color: #999;cursor: pointer;">
        <i class="layui-icon layui-icon-search" ></i>
        </span>
        </div>
        <%--<div style="display: inline-block;border-bottom: 1px solid #ccc;margin-left: 25px;display: none" class="isearchs">--%>
            <%--<input type="text" class="search" placeholder="点击搜索计划" style="cursor: pointer;" readonly id="isearchs"/>--%>
            <%--<span style="padding: 5px;color: #999;cursor: pointer;">--%>
        <%--<i class="layui-icon layui-icon-search" ></i>--%>
        <%--</span>--%>
        <%--</div>--%>
    </nav>
    <div >
        <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief" >
            <div class="layui-tab-content">
                <div class="content tabulation" id="internal">
                    <div class="table_box" style="margin-top: -20px;width: 100%"><table id="internalTable" lay-filter="internalTable" style="width:95%"></table></div>
                </div>

                <div class="content tabulation" style="display: none;width: 95%" id="internals">
                    <div class="table_box" style="margin-top: -20px;"><table id="internalTables" lay-filter="internalTable" style="width:95%"></table></div>
                </div>


                <div class="content monthly" style="display: none">
                    <%--<div>--%>
                        <%--<span class="layui-input-inline" style="color: #2196f3;padding-left:0">2016年全年12月收支统计表（单位：元）</span>--%>
                    <%--</div>--%>
                    <div id="monthly" style="margin-top: 40px;width: 100%"></div>
                </div>
                <div class="content quarter" style="display: none">
                    <%--<div>--%>
                        <%--<span class="layui-input-inline" style="color: #2196f3;padding-left:0">2016年全年12月收支统计表（单位：元）</span>--%>
                    <%--</div>--%>
                    <div id="quarter" style="margin-top: 40px;width: 100%"></div>
                </div>
            </div>
        </div>
    </div>
</form>
</body>
<script>
    layui.use(['form', 'layedit', 'laydate','layedit','table','element'], function(){
        var form = layui.form
            ,layer = layui.layer
            ,layedit = layui.layedit
            ,laydate = layui.laydate
            ,table = layui.table
            ,element = layui.element

        layedit.build('texPart'); //建立编辑器
        table.render();
        form.render();
        //日期
        laydate.render({
            elem: '#date'
        });


        //月度
        var internalTable = table.render({
            elem: '#internalTable'
            ,url: '/IncomeType/IncomCount'   //数据接口
            ,totalRow: true
            // ,page: true //开启分页
            // ,limit: 12
            ,cols: [[ //表头
                {field: 'recordCountMonth', align:'center',title:'月份/天',totalRowText: '总计',width:150},
                {field: 'expenseRecord', align:'center',title: '支出金额',totalRow: true},
                {field: 'inComeRecord', align:'center',title: '收入金额',totalRow: true},
                {field: 'chaRecord', align:'center',title: '收支差',totalRow: true},
                {field: 'countRecord',align:'center', title: '收支记录个数',totalRow: true},


            ]]
            ,response: {
                statusName: 'flag',  //规定数据状态的字段名称，默认：code
                statusCode: true,   //规定成功的状态码，默认：0
                dataName: 'obj',    //规定数据列表的字段名称，默认：data
                dataNames: 'object',    //规定数据列表的字段名称，默认：data
                countName: 'totleNum'
            }


        });

        //季度
        var internalTables = table.render({
            elem: '#internalTables'
            ,url: '/IncomeType/IncomCount?quarter=1'   //数据接口
            ,totalRow: true
            // ,page: true //开启分页
            // ,limit: 10
            ,cols: [[ //表头
                {field: 'recordCountMonth', align:'center',title: '季度',totalRowText: '总计',width:150},
                {field: 'expenseRecord', align:'center',title: '支出金额',totalRow: true},
                {field: 'inComeRecord', align:'center',title: '收入金额',totalRow: true},
                {field: 'chaRecord', align:'center',title: '收支差',totalRow: true},
                {field: 'countRecord',align:'center', title: '收支记录个数',totalRow: true,fixed: 'right'},



            ]]
            ,response: {
                statusName: 'flag',  //规定数据状态的字段名称，默认：code
                statusCode: true,   //规定成功的状态码，默认：0
                dataName: 'obj',    //规定数据列表的字段名称，默认：data
                countName: 'totleNum'
            }
        });




        $(".isearch").click(function(){
            layer.open({
                type: 1 //Page层类型
                , area: ['400px', '300px']
                , title: '方案选择'
                // , maxmin: true //允许全屏最小化
                , content:
                    '<form class="layui-form" action="">' +
                    '<div class="layui-form" id="ids">' +
                    ' <div class="layui-form-item" style="margin-top: 30px">' +
                    '  <label class="layui-form-label">方案类别：<span style="color: red;">*</span></label>' +
                    '<div class="layui-input-inline">' +
                    ' <select id="assetType" name="modules" lay-verify="required" lay-search="" lay-filter="searchSelects">' +
                    ' <option value="">请选择方案类别</option>' +
                    '  </select>' +
                    ' </div>' +
                    ' </div>' +
                    ' <div class="layui-form-item">' +
                    '  <label class="layui-form-label">选择计划：<span style="color: red;">*</span></label>' +
                    '<div class="layui-input-inline">' +
                    ' <select id="assetsId" name="modules" lay-verify="required" lay-search="" lay-filter="searchSelect">' +
                    '  </select>' +
                    ' </div>' +
                    ' </div>' +
                    '</div>' +
                    '</form>'

                , btn: ['提交', '返回'],
                success: function () {

                    //方案类别、计划
                    $.ajax({
                        url: '/IncomeType/findIncomType',
                        type: 'get',
                        dataType: 'json',
                        success: function (res) {
                            var data=res.obj;
                            var str='<option value="">请选择方案类别</option>';
                            for(var i=0;i<data.length;i++){
                                str+='<option value="'+data[i].planTypeId+'">'+data[i].planTypeName+'</option>';
                            }
                            $("#assetType").html(str);
                            form.render();


                        }
                    });

                    form.on('select(searchSelects)', function(data){
                        $.ajax({
                            url: '/IncomePlan/findIncomePlan',
                            type: 'get',
                            dataType: 'json',
                            data: {
                                planTypeId:data.value,
                            },
                            success: function (res) {
                                var data = res.obj;
                                var str2='';
                                if(data.length>0){
                                    for(var i=0;i<data.length;i++){
                                        str2 += '<option data-id="' +data[i].planCode + '"  value="' +data[i].planId + '" >' + data[i].planCode + '</option>'                                    }
                                }else {
                                    str2 +='<option value="" selected>该类别下没有计划</option>'
                                }
                                $("#assetsId").html(str2);
                                form.render();

                            }
                        });
                    });


                }

                ,yes: function (index) {

                    var assetType=$("#assetType").val()
                    var assetsId=$("#assetsId").val()
                    var b = $("#assetsId option:selected").text();

                    if (assetType =='' || assetsId == '' ) {
                        alert('带*为必选项！');
                    }


                    if(assetType != '' && assetsId != ''){
                        $.ajax({
                            type: 'post',
                            url: '/IncomeType/IncomCount',
                            dataType: 'json',
                            data: {
                                planId:assetsId,

                            },
                            success: function (obj) {
                                var datas=obj.obj;

                                var dataNum=[]; //支出
                                var str=[];    //收入
                                var strs=[]
                                for(var i = 0; i< datas.length; i++){

                                    dataNum.push(datas[i].expenseRecord);

                                    str.push(datas[i].inComeRecord);
                                    strs.push(datas[i].recordCountMonth);

                                }
                                hetongTongji(dataNum,str,strs)
                                hetongTongjis(dataNum,str,strs)
                                if (obj.flag) {
                                    $.layerMsg({content: '搜索成功！', icon: 1}, function () {

                                    })

                                    internalTable.reload({
                                        where: {
                                            planId:assetsId,

                                        }

                                    });
                                    layer.close(index);

                                }else{
                                    alert('搜索失败');
                                }

                            }
                        })
                    }
                    $("#isearch").val(b);


                }
            });

        });

        $.get('/IncomeType/IncomCount', function(res){
            if (res.flag) {
                internalTable.reload({
                    where: {
                        year: 2020,

                    }

                });
            }



            $('#searchuls').on('click','li',function(data){
                var statuss = this.value
                $.ajax({
                    type:'get',
                    url:'/IncomeType/IncomCount',
                    dataType:'json',
                    data:{
                        month: statuss,
                        year: 2020,
                    },
                    success:function (res) {
                        var datas=res.obj;

                        var dataNum=[]; //支出
                        var str=[];    //收入
                        var strs=[]
                        for(var i = 0; i< datas.length; i++){

                            dataNum.push(datas[i].expenseRecord);

                            str.push(datas[i].inComeRecord);
                            strs.push(datas[i].recordCountMonth);

                        }
                        hetongTongji(dataNum,str,strs)
                        hetongTongjis(dataNum,str,strs)


                    }

                })
                $.get('/IncomeType/IncomCount', function(res){

                    if (res.flag) {
                        internalTable.reload({
                            where: {
                                month: statuss
                            }

                        });
                    }

                });

            })


        });


        $('#searchul').on('click','li',function(data){
            var status = this.value
            $.get('/IncomeType/IncomCount', function(res){
                if (res.flag) {
                    internalTable.reload({
                        where: {
                            year: status
                        }

                    });
                }
            });

            $('#searchuls').on('click','li',function(data){
                var statuss = this.value
                $.ajax({
                    type:'get',
                    url:'/IncomeType/IncomCount',
                    dataType:'json',
                    data:{
                        year: status,
                        month: statuss

                    },
                    success:function (res) {
                        var datas=res.obj;

                        var dataNum=[]; //支出
                        var str=[];    //收入
                        var strs=[]
                        for(var i = 0; i< datas.length; i++){

                            dataNum.push(datas[i].expenseRecord);

                            str.push(datas[i].inComeRecord);
                            strs.push(datas[i].recordCountMonth);

                        }
                        hetongTongji(dataNum,str,strs)
                        hetongTongjis(dataNum,str,strs)

                    }

                })
                $.get('/IncomeType/IncomCount', function(res){
                    if (res.flag) {
                        internalTable.reload({
                            where: {
                                month: statuss
                            }

                        });
                    }

                });
            })

        })


        $('#searchul2s').on('click','li',function(data){
            var statuss = this.value
            $.ajax({
                type:'get',
                url:'/IncomeType/IncomCount',
                dataType:'json',
                data:{
                    year: statuss,
                    quarter:1

                },
                success:function (res) {
                    var datas=res.obj;

                    var dataNum=[]; //支出
                    var str=[];    //收入
                    var strs=[]
                    for(var i = 0; i< datas.length; i++){

                        dataNum.push(datas[i].expenseRecord);

                        str.push(datas[i].inComeRecord);
                        strs.push(datas[i].recordCountMonth);

                    }
                    hetongTongji(dataNum,str,strs)
                    hetongTongjis(dataNum,str,strs)


                }

            })
            $.get('/IncomeType/IncomCount', function(res){
                if (res.flag) {
                    internalTables.reload({
                        where: {
                            year: statuss,
                            // quarter:1
                        }

                    });
                }
            });
        })

        $('#screen').on('click',function(data){
            var statuss = this.value
            $.get('/IncomeType/IncomCount', function(res){
                if (res.flag) {
                    internalTables.reload({
                        where: {
                            year: 2020,
                            quarter:1
                        }

                    });
                }
            });


        })




    });


    $('.content').height($(window).height());
    $('.classBtn').click(function () {
        $(this).toggleClass("one")
        $(this).siblings('button').removeClass("one");
        if($(this).text()=='按月度'){
            $('.monthly').hide();
            $('.quarter').hide();
            $('nav:eq(2)').show();
            $("#isearch").val('');
        }else if($(this).text()=='按季度'){
            $('.quarter').hide();
            $('.monthly').hide();
            $('nav:eq(2)').hide();
            $("#isearch").val('');
        }
    });
    $('#allBtn').click(function () {
        $('#internal').show();
        $('#internals').hide();
        // $('#internals1').hide();
        $('#searchul2').hide();
        $('#searchul1').show();
        $('.isearch').show();
        $('.isearchs').show();


    });
    $('#screen').click(function () {
        $('#internal').hide();
        $('#internals').show();
        $('#searchul2').show();
        $('#searchul1').hide();
        $('.isearchs').hide();



    });




    function typeMap(num) {
        if (num == 1){
           $('.tabulation').show();
           $('.monthly').hide();
           $('.quarter').hide();
            // $('#internals').hide();
        }else if(num == 2){
           $('.monthly').show();
           $('.tabulation').hide();
           $('.quarter').hide();

        }else{
           $('.quarter').show();
           $('.monthly').hide();
           $('.tabulation').hide();
        }
    }

    //曲线图
    function hetongTongji(dataNum,str,strs) {
        var chart = Highcharts.chart('monthly', {
            title: {
                text: ''
            },
            colors: ['#7CB5EC', '#90ED7D'],
            subtitle: {
                text: ''
            },
            credits: {
                enabled: false
            },
            xAxis: {
                categories:strs,

                crosshair: true
            },
            yAxis: {
                title: {
                    text: '金额'
                },
                labels: {
                    formatter: function () {
                        return this.value + '元';
                    }
                }
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'middle'
            },
            plotOptions: {
                column: {
                    borderWidth: 0
                }
            },
            series: [{
                name: '收入',
                data: str
            }, {
                name: '支出',
                data: dataNum
            }],
            responsive: {
                rules: [{
                    condition: {
                        maxWidth: 500
                    },
                    chartOptions: {
                        legend: {
                            layout: 'horizontal',
                            align: 'center',
                            verticalAlign: 'bottom'
                        }
                    }
                }]
            }
        });
    }

    //柱状图
    function hetongTongjis(dataNum,str,strs) {
        $("#quarter").highcharts({
            chart: {
                type: 'column'
            },
            title: {
                text: ''
            },
            colors: ['#7CB5EC', '#90ED7D'],
            subtitle: {
                text: ''
            },
            xAxis: {
                categories: strs
//                categories:dataMonth
            },
            yAxis: {
                title: {
                    text: '金额'
                },
                labels: {
                    formatter: function () {
                        return this.value + '元';
                    }
                }
            },
            credits: {
                enabled: false
            },
            plotOptions: {
                line: {
                    dataLabels: {
                        enabled: false          // 开启数据标签
                    },
                    enableMouseTracking: true, // 关闭鼠标跟踪，对应的提示框、点击事件会失效
                    showInLegend: false
                }
            },
            series: [{
                name: '收入',
                data: str
            }, {
                name: '支出',
                data: dataNum
//                data:dataNum
            }]
        });
    }

    $('#biaoge').click(function () {

        $('#internal').show();
        $('#internals').hide();
        $('#searchul2').show();
        $('#searchul1').hide();
        table.render()


    });

    $('#allBtn').on('click',function(data){

        $('#biaoge').click(function () {
            $('#internals').hide();
            $('#internal').show();
            $('#searchul2').show();
            $('#searchul1').hide();
            table.render()


        });

    })

    $('#screen').on('click',function(data){

        $('#biaoge').click(function () {
            $('#internal').hide();
            $('#internals').show();
            $('#searchul2').show();
            $('#searchul1').hide();
            table.render()

        });

    })


    $.ajax({
        type:'get',
        url:'/IncomeType/IncomCount',
        dataType:'json',
        data:{
            month: 0,
            year: 2020,
        },
        success:function (res) {
            var datas=res.obj;

            var dataNum=[]; //支出
            var str=[];    //收入
            var strs=[]
            for(var i = 0; i< datas.length; i++){

                dataNum.push(datas[i].expenseRecord);

                str.push(datas[i].inComeRecord);
                strs.push(datas[i].recordCountMonth);

            }
            hetongTongji(dataNum,str,strs)
            hetongTongjis(dataNum,str,strs)

        }

    })
    $('#screen').on('click',function(data){
        $.ajax({
            type:'get',
            url:'/IncomeType/IncomCount',
            dataType:'json',
            data:{
                year: 2020,
                quarter:1

            },
            success:function (res) {
                var datas=res.obj;

                var dataNum=[]; //支出
                var str=[];    //收入
                var strs=[]
                for(var i = 0; i< datas.length; i++){

                    dataNum.push(datas[i].expenseRecord);

                    str.push(datas[i].inComeRecord);
                    strs.push(datas[i].recordCountMonth);

                }
                hetongTongji(dataNum,str,strs)
                hetongTongjis(dataNum,str,strs)


            }

        })
    })



    // $('#derivation').click(function(){

        // window.location.href = "/officetransHistory/exportShopList"

    // });



</script>

</html>
